<script setup>
import {getTodayProfit,getYesterdayProfit} from '@/api/computer'
import {onMounted, ref} from "vue";

onMounted(()=>{
  getTodayProfitData()
})

const todayProfit = ref({
  date: '',
  totalProfit: 0
})
const yesterdayProfit = ref({
  date: '',
  totalProfit: 0
})
const percentageData = ref(0)
const compareData = ref(0)
const compareDataChar = ref('')
const compareCharColor = ref('black')
const compareTodayAndYesterday = () => {
  if (yesterdayProfit.value === 0) {
    compareData.value = todayProfit.value.totalProfit
  }else {
    compareData.value = todayProfit.value.totalProfit - yesterdayProfit.value
  }
  if (compareData.value < 0) {
    compareDataChar.value = '-'
    compareCharColor.value = 'red'
  }else {
    compareDataChar.value = '+'
    compareCharColor.value = 'green'
  }
}
const getTodayProfitData = async () => {
  let result = await getTodayProfit()
  if (result.code === 200) {
    todayProfit.value = result.date
    console.log(todayProfit.value)
    //如果查询成功 则更新百分百
    percentageData.value = (todayProfit.value.totalProfit / 200) * 100

    //获取昨日收入
    getYesterdayProfitData()
  }
}
const getYesterdayProfitData = async () => {
  let result = await getYesterdayProfit()
  if (result.code === 200) {
    if (result.date == null) {
      yesterdayProfit.value = 0
    }else {
      yesterdayProfit.value = result.date.totalProfit
    }
    //获取收入对比
    compareTodayAndYesterday()

  }
}

</script>

<template>
  <div>
    <div>本日网咖电脑营收</div>
    <div class="parentContent">
      <el-progress type="circle" :percentage="percentageData" />
      <div class="parentContent-div1">
        <div style="color: #19c738">本日营收：{{todayProfit.totalProfit ? todayProfit.totalProfit : 0}}元</div>
        <div style="color: #007bff">目标金额200￥</div>
      </div>
    </div>
    <div style="font-size: 13px" :style="{ color: compareCharColor }">本日营收对比昨日：<span>{{compareDataChar}}{{compareData}}元</span></div>
  </div>

</template>

<style scoped>
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
.parentContent {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.parentContent-div1 {
  margin-left: 20px;
}
</style>